import React, { useEffect, useState } from 'react'
import request from '../../api/request'
import { Grid } from 'antd-mobile'
import { NavBar, Space, Toast, Card } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { InfiniteScroll } from 'antd-mobile'
import styles from './index.module.css'
import { ProductCard, Tag, Button } from 'react-vant';
function Listt() {
    let navtion = useNavigate()
    const [list, setList] = useState([])
    const getlist = async () => {
        const res = await request.get('/api/list')
        console.log(res);
        let { code, data } = res.data
        if (code == 200) {
            setList([...list, ...data])
        }
    }
    useEffect(() => {
        getlist()
    }, [])

    const deyilist=(item)=>{
        navtion('/dttaill',{
            state:item
        })
    }
    return (
        <div>
            <div>
                {
                    list.length > 0 && list.map((item, index) => {
                        return <div key={index} onClick={()=>deyilist(item)} >
                            <ProductCard
                                num="2"
                                price={item.price}
                                desc="描述信息"
                                title={item.title}
                                thumb={<img src={item.image} width={100} height={100}/>}
                               
                                footer={
                                    <>
                                        <Button size="mini" round plain style={{ marginRight: 2 }}>
                                            标签1
                                        </Button>
                                        <Button size="mini" round plain>
                                            标签2
                                        </Button>
                                    </>
                                }
                            />
                        </div>
                    }
             )}

            </div>
        </div>
    )
}

export default Listt
